<!--所有公司目录-->
<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <GeneralTopBar :showPosition="false"/>
    <main>
      <div class="filter-box">
        <div class="filter-condition margin-20per">
          <div class="condition-city">
            <span class="title">公司地点：</span>
            <span class="content">
                <el-link v-for="city in companyCity" :key="city" :class="{'is-select': conditionCity === city}" @click="conditionSelect('city',city)">{{ city }}</el-link>
                <el-button type="text" class="select-city" @click="dialogVisible = true">全部城市</el-button>
              </span>
          </div>
          <div class="condition-tag">
            <span class="title">公司规模：</span>
            <span class="content">
                <el-link v-for="tag in companyTag" :key="tag.id" :class="{'is-select': conditionTag === tag.title}" @click="conditionSelect('companyScale',tag.title)">{{ tag.title }}</el-link>
              </span>
          </div>
          <div class="condition-tag">
            <span class="title">公司性质：</span>
            <span class="content">
                <el-link v-for="type in companyType" :key="type.id" :class="{'is-select': conditionType === type.title}" @click="conditionSelect('companyType',type.title)">{{ type.title }}</el-link>
              </span>
          </div>
          <div class="condition-tag">
            <span class="title">融资状态：</span>
            <span class="content">
                <el-link v-for="size in companySize" :key="size.id" :class="{'is-select': conditionSize === size.title}" @click="conditionSelect('financingStage',size.title)">{{ size.title }}</el-link>
              </span>
          </div>
        </div>
      </div>
      <div class="company-box margin-20per">
        <ul>
          <li v-for="company in companyList" :key="company.id ">
            <div class="sub-li">
              <div class="company-introduction">
                <p>
                  <el-link :href="'/company/detail?company_id=' + company.id">

                    <img :src="company.companyPic" :alt="company.companyName"
                         style="width: 80px; height: 80px; object-fit: cover">
                  </el-link>
                </p>
                <h3 href="'/company/detail?company_id=' + company.id">{{ company.companyName }}</h3>
                <h4 href="'/company/detail?company_id=' + company.id">
                  {{ company.companyType.title }}
                  <el-divider direction="vertical"></el-divider>
                  {{ company.companyScale.title }}
                </h4>
                <h4 :title="company.firmName">{{ company.firmName}}</h4>
              </div>
              <div class="company-recruit">
                <el-link :href="'/company/evaluation?company_id=' + company.id" class="job-link">
                  <p>{{ company.userComment }}</p>
                  <p>面试评价</p>
                </el-link>
                <el-link :href="'/company/job?company_id=' + company.id" class="job-link">
                  <p>{{ company.recruit }}</p>
                  <p>在招职位</p>
                </el-link>
                <el-link :href="'/company/detail?company_id=' + company.id" class="job-link">
                  <p>{{ company.scopeBusiness }}%</p>
                  <p>经营范围</p>
                </el-link>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页栏 -->
      <div class="page margin-20per">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
        <!-- 分页组件 -->
        <!--        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
      </div>
    </main>
    <!-- 底部信息栏 -->
    <GeneralFooter />
    <!--  城市选择框  -->
    <CityDialog :visible.sync="dialogVisible" :currentCity="conditionCity" @update:currentCity="conditionSelect('city', $event)"/>
  </div>
</template>

<script>
  import GeneralTopBar from "../../../components/GeneralTopBar";
  import GeneralFooter from "../../../components/GeneralFooter";
  import CityDialog from "../../../components/CityDialog.vue";
  import * as Constant from "@/common/constants";
  // import Pagination from "../../../components/Pagination";
  export default {
    name: "Company",
    components: { GeneralTopBar, GeneralFooter, CityDialog},
    data() {
      return {
        conditionCity: Constant.CONDITION_CITY,//城市
        conditionTag: Constant.CONDITION_TAG,//规模
        conditionType: Constant.CONDITION_TYPE,//类型
        conditionSize: Constant.CONDITION_SIZE,//融资
        companyCity: ["全国","北京市","上海市","广州市","深圳市","杭州市","西安市","厦门市","长沙市","武汉市","天津市","成都市","重庆市","苏州市"],
        companyTag: [],
        companyType: [],
        companySize: [],
        companyList: [],
        pageNum: 1,
        pageSize: 8,
        total: 1000,
        dialogVisible: false,
        currentPage:1,
      }
    },
    created() {
      this.initData();
      this.initCondition();
    },
    methods: {

      async initData() {
        let getCompanyList = async () => {

          const res = await this.$axios.request({
            url: "/web/company/screen",
            method: "get",
            params: {
              city: this.conditionCity,
              companyType: this.conditionType,
              companyScale:this.conditionTag,
              financingStage:this.conditionSize,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
          });

          if(res) {
            // console.log("----------------------")
            // console.log(res);
            // console.log(res.data);
            this.companyList = res.data.companyPageInfo.list;
          }
        };
        let getCompanyTypes = async () => {
          const rec = await this.$axios.request({
            url: "/web/companyType/getCompanyTypes",
            method: "get",
          });

          if(rec) {
            this.companyType = rec.data.companyTypeList;
          }
        };
        let getFinancingStage = async () => {
          const rej = await this.$axios.request({
            url: "web/financingStage/financingStages",
            method: "get",
          });
          console.log(rej)
          if(rej) {
            this.companySize = rej.data.financingStages;
            console.log("+++++++++++++++++")
            console.log( this.companycompanySize)
          }
        };
        let getCompanyScale = async () => {
          const red = await this.$axios.request({
            url: "/web/CompanyScale/getCompanyScale",
            method: "get",
          });
          // console.log(red)
          if(red) {
            this.companyTag = red.data.companyScaleList;
            // console.log("----------00"+ this.companyTag)
          }
        };

        await this.$axios.all([getCompanyList(),getCompanyTypes(),getFinancingStage(),getCompanyScale()]);
      },
      initCondition() {
        const { city, companyScale, companyType, financingStage}  = this.$route.query;
        if(city) {
          this.conditionCity = city;
          const index = this.companyCity.indexOf(city);
          index !== -1
                  ? this.companyCity.splice(index, 1)
                  &&
                  this.companyCity.unshift(city)
                  : this.companyCity.unshift(city);
        }
        if(companyScale){
          this.conditionTag = companyScale;
        }
        if(companyType){
          this.conditionType = companyType;
        }
        if(financingStage){
          this.conditionSize = financingStage;
        }
      },
      conditionSelect(key, condition) {
        switch (key) {
          case "city":
            this.conditionCity = condition;
            break;
          case "companyScale":
            this.conditionTag = condition;
            break;
          case "companyType":
            this.conditionType = condition;
            break;
          case "financingStage":
            this.conditionSize = condition;
            break;
        }

        this.$axios.request({
          url: "/web/company/screen",
          method: "get",
          params: {
            city: this.conditionCity,
            companyType: this.conditionType,
            companyScale: this.conditionTag,
            financingStage: this.conditionSize,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        }).then(res=>{
          this.companyList =res.data.companyPageInfo.list;
        });

      }
      ,
      filter(data) {
        return data.split("\n");
      },
      citySelect(city) {
        this.conditionCity = city;
        this.conditionDistrict = Constant.CONDITION_DISTRICT;
      },
      handleCurrentChange(value) {

        this.currentPage = value;
        this.initData();
      }
    },


  }
</script>

<style lang="less" scoped>
  .el-link-active{
    transition: .3s;
    &:hover{
      color: @mainColor;
    }
    &:active{
      color: @activeColor;
    }
  }

  @mainColor: #5dd5c8;
  @activeColor: #00c2b3;
  @fontColor: #414a60;
  @salaryColor: #fb670f;
  @promptColor: #999;
  main{
    .filter-box{
      background: #fff;
      box-shadow: 0 3px 6px rgba(6,0,1,.05);
      padding: 20px 0;
      .filter-condition{
        > div {
          line-height: 40px;
        }
        .title{
          margin-right: 8px;
          float: left;
        }
        .content{
          display: block;
          margin-left: 78px;
          .el-link{
            margin: 0 20px 0 0;
            color: @fontColor;
            .el-link-active();
            &.is-select{
              color: @activeColor;
            }
          }
        }
        .select-city{
          color: #414a60;
          .el-link-active();
          margin-left: 20px;
        }
      }
    }
    .company-box{
      margin-top: 60px;
      ul{
        display: grid;
        grid-template-columns: repeat(4, calc((100% - 48px) / 4));
        gap: 16px 16px;
        li{
          .sub-li{
            background: #fff;
            &:hover{
              box-shadow: 0 0 10px 0 rgba(56,81,76,.12);
            }
            overflow: hidden;
            .company-introduction{
              margin: 0 13px;
              padding: 20px 0 14px;
              text-align: center;
              border-bottom: 1px dashed #e0e0e0;
              p{
                margin-bottom: 14px;
              }
              h3{
                margin-top: 14px;
                font-size: 15px;
                font-weight: 500;
              }
              h4{
                margin-top: 3px;
                font-size: 13px;
                font-weight: 400;
                color: #999;
                & + h4 {
                  color: #414a60;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
              }
            }
            .company-recruit{
              margin-top: 20px;
              margin-bottom: 14px;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              .el-link{
                display: block;
                text-align: center;
                margin-left: 0;
                font-size: 13px;
                color: #5dd5c8;
                &:nth-child(2){
                  border-left: 1px solid #dcdfe6;
                  border-right: 1px solid #dcdfe6;
                }
                /deep/ .el-link--inner{
                  height: 30px;
                  line-height: 18px;
                }
                p:last-child{
                  font-size: 11px;
                  color: #999;
                  .el-link-active();
                }

              }
            }
          }
        }
      }
    }
    .page{
      text-align: center;
      .el-pagination{
        margin-top: 60px;
        /deep/ button, /deep/ li {
          background: #fff;
        }
        /deep/ li{
          &:not(.disabled):hover{
            color: @activeColor;
          }
          &:not(.disabled).active{
            background-color: @activeColor;
            color: #FFF;
          }
        }
      }
    }
  }
</style>